<template>
  <div>
    <div class="table">
      <el-table
        :data="songList"
        stripe
        style="width: 100%; font-size: 13px; color: #343434"
        :row-style="{ height: '35px' }"
        :cell-style="{ padding: '8px' }"
        @cell-dblclick="dblclick"
      >
        <el-table-column type="index" width="100"> </el-table-column>
        <el-table-column prop="name" label="音乐标题" width="600">
        </el-table-column>
        <el-table-column prop="artists[0].name" label="歌手" width="350">
        </el-table-column>
        <el-table-column prop="album.name" label="专题" width="450">
        </el-table-column>
        <el-table-column prop="duration" label="时长">
          <template scope="scope">
            {{ scope.row.duration | timeFilter }}
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      songList: [],
    };
  },
  created() {
    this.getSong();
  },

  methods: {
    async getSong() {
      var text = this.$store.state.searchText;
      var res = await this.$http(`search?keywords=${text}`);
      this.songList = res.data.result.songs;
    },
    //某个单元格被双击时触发 传递当前歌曲信息到父组件的songlist中
    async dblclick(row) {
      var id = row.id;
      //发送请求获取歌曲
      const data4 = await this.$http(`/song/url?id=${id}`);
      //向父组件的播放器传递url
      var al = {};
      al.picUrl = "";
      var songObj = {
        name: row.name,
        ar: row.artists,
        dt: row.duration,
        id: row.id,
        al: al,
      };
      // this.$emit("getUrl", data4.data.data[0]);
      this.$emit("getSong", songObj);

      console.log(songObj);
    },
  },
};
</script>